<!--服务器信息-->
<template>
  <div class="app-container">

    <!--列表-->
    <div class="table-container flex-main">
      <div class="table-container-header">
        <el-alert
          type="success"
          show-icon
          :closable="false">
          <div slot="title">
            上次更新时间：{{ updateTime | formatDate(T.DATE_TIME_FMT1) }}
            <el-divider direction="vertical" />
            <el-link type="primary" :underline="false" @click="handleClickUpdate">立即更新</el-link>
          </div>
        </el-alert>
      </div>
      <div style="overflow: auto;">
        <el-row :gutter="20" style="margin:0">
          <el-col :span="24">
            <el-card class="box-card">
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <tbody>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.sys" class="cell">{{ server.sys.computerName }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.sys" class="cell">{{ server.sys.osName }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.sys" class="cell">{{ server.sys.computerIp }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.sys" class="cell">{{ server.sys.osArch }}</div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin:10px 0px">
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>CPU</span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <thead>
                    <tr>
                      <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.cpu" class="cell">{{ server.cpu.cpuNum }}</div></td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.cpu" class="cell">{{ server.cpu.used }}%</div></td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.cpu" class="cell">{{ server.cpu.sys }}%</div></td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.cpu" class="cell">{{ server.cpu.free }}%</div></td>
                    </tr>
                  </tbody>
                </table>
              </div></el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>内存</span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <thead>
                    <tr>
                      <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.mem" class="cell">{{ server.mem.total }}G</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell">{{ server.jvm.total }}M</div></td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.mem" class="cell">{{ server.mem.used }}G</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell">{{ server.jvm.used }}M</div></td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.mem" class="cell">{{ server.mem.free }}G</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell">{{ server.jvm.free }}M</div></td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.mem" class="cell" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin:10px 0px">
          <el-col :span="24">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>JAVA虚拟机信息</span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <tbody>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell">{{ server.jvm.name }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell">{{ server.jvm.version }}</div></td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell color-primary">{{ server.jvm.startTime }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
                      <td class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell color-primary">{{ server.jvm.runTime }}</div></td>
                    </tr>
                    <tr>
                      <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
                      <td colspan="3" class="el-table__cell is-leaf"><div v-if="server.jvm" class="cell">{{ server.jvm.home }}</div></td>
                    </tr>
                    <tr>
                      <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
                      <td colspan="3" class="el-table__cell is-leaf"><div v-if="server.sys" class="cell">{{ server.sys.userDir }}</div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin:10px 0px">
          <el-col :span="24">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>磁盘状态</span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <thead>
                    <tr>
                      <th class="el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
                      <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
                    </tr>
                  </thead>
                  <tbody v-if="server.sysFiles">
                    <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
                      <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
                      <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      updateTime: new Date().getTime(),
      server: {},
      interval: null
    }
  },
  created() {
    this.loadSystemInfo(true)
    this.interval = window.setInterval(() => {
      this.loadSystemInfo()
    }, 1000)
  },
  destroyed() {
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {

    handleClickUpdate() {
      this.loadSystemInfo(true)
    },
    async loadSystemInfo(loading = false) {
      try {
        this.updateTime = new Date().getTime()
        this.server = await this.$store.dispatch('monitorServer', { loading: loading })
      } catch (err) {
        if (this.interval) {
          window.clearInterval(this.interval)
        }
      }
    },
    handleChange() {
      this.$router.push({ path: '/monitor/performance/dashboard' })
    }
  }

}
</script>
